<template>
  <div class="goods_box">
    <el-breadcrumb class="mt fo">
      <el-breadcrumb-item :to="{ path: '/Page' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>全部商品</el-breadcrumb-item>
      <el-breadcrumb-item>分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- tab切换按钮 -->
    <ul class="goods_tab">
      <li style="fontweight: 900">分类</li>
      <li
        v-for="item in tabList"
        :key="item.id"
        :class="{ active: flag == item.id }"
        @click="tabsBtn(item.id)"
      >
        {{ item.name }}
      </li>
    </ul>
    <!-- 手机区域 -->
    <ul v-if="flag == 2">
      <li>
        <div>
          <ul class="dsf1">
            <li class="lis" v-for="item in productList" :key="item.product_id">
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 电视机 -->
    <ul v-if="flag == 3">
      <li>
        <div>
          <ul class="dsf1">
            <li class="lis" v-for="item in PromoList" :key="item.product_id">
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 空调 -->
    <ul v-if="flag == 4">
      <li>
        <div>
          <ul class="dsf1">
            <li
              class="lis"
              v-for="item in AppliancesList"
              :key="item.product_id"
            >
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 洗衣机 -->
    <ul v-if="flag == 5">
      <li>
        <div>
          <ul class="dsf1">
            <li
              class="lis"
              v-for="item in AppliancesLists"
              :key="item.product_id"
            >
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 保护套 -->
    <ul v-if="flag == 6">
      <li>
        <div>
          <ul class="dsf1">
            <li
              class="lis"
              v-for="item in ProtectiveList"
              :key="item.product_id"
            >
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 保护摸 -->
    <ul v-if="flag == 7">
      <li>
        <div>
          <ul class="dsf1">
            <li
              class="lis"
              v-for="item in ProtectiveLists"
              :key="item.product_id"
            >
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 充电器 -->
    <ul v-if="flag == 8">
      <li>
        <div>
          <ul class="dsf1">
            <li
              class="lis"
              v-for="item in ProtectiveListss"
              :key="item.product_id"
            >
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <!-- 充电器 -->
    <ul v-if="flag == 9">
      <li>
        <div>
          <ul class="dsf1">
            <li
              class="lis"
              v-for="item in ProtectiveListsss"
              :key="item.product_id"
            >
              <div class="dsf1_box">
                <img
                  :src="'http://101.132.181.9/api/' + item.product_picture"
                  alt=""
                />
                <p>{{ item.product_name }}</p>
                <p>{{ item.product_title }}</p>
                <p>{{ item.product_price }}</p>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import {
  getAllGoodsApi,
  getProductApi,
  getPromoApi,
  getAppliancesApi,
  getProtectiveApi,
} from "@/http/api.js";
export default {
  name: "goods",

  setup() {
    // 引入路由
    const router = useRouter();
    // 引入仓库
    const store = useStore();
    const { proxy } = getCurrentInstance();
    const data = reactive({
      //tab切换
      tabList: [
        {
          id: 1,
          name: "全部",
        },
        {
          id: 2,
          name: "手机",
        },
        {
          id: 3,
          name: "电视机",
        },
        {
          id: 4,
          name: "空调",
        },
        {
          id: 5,
          name: "洗衣机",
        },
        {
          id: 6,
          name: "保护套",
        },
        {
          id: 7,
          name: "保护膜",
        },
        {
          id: 8,
          name: "充电器",
        },
        {
          id: 9,
          name: "充电宝",
        },
      ],
      flag: false, //状态
      categoryName: "手机",
      productList: [],
      PromoList: [],
      AppliancesList: [],
      AppliancesLists: [],
      ProtectiveList: [],
      ProtectiveLists:[],
      ProtectiveListss:[],
      ProtectiveListsss:[]
    });
    //tab切换按钮
    const tabsBtn = (id) => {
      // console.log(id);
      proxy.flag = id;
    };
    //手机
    getProductApi(data).then((res) => {
      console.log(res, "手机区域");
      data.productList = res.Product;
    });
    //电视机
    const getPromo = () => {
      let categoryName = ["电视机"];
      getPromoApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "电视机");
        data.PromoList = res.Product;
      });
    };
    //空调
    const getAppliances = () => {
      let categoryName = ["空调"];
      getAppliancesApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "空调");
        data.AppliancesList = res.Product;
      });
    };
    //洗衣机
    const getAppliancess = () => {
      let categoryName = ["洗衣机"];
      getAppliancesApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "洗衣机");
        data.AppliancesLists = res.Product;
      });
    };
    //保护套
    const getProtective = () => {
      let categoryName = ["保护套"];
      getProtectiveApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "保护套");
        data.ProtectiveList = res.Product;
      });
    };
    //保护膜
    const getProtectives = () => {
      let categoryName = ["保护膜"];
      getProtectiveApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "保护膜");
        data.ProtectiveLists = res.Product;
      });
    };
    //充电器
    const getProtectivess = () => {
      let categoryName = ["充电器"];
      getProtectiveApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "充电器");
        data.ProtectiveListss = res.Product;
      });
    };
    //充电器
    const getProtectivesss= () => {
      let categoryName = ["充电宝"];
      getProtectiveApi({ categoryName: categoryName }).then((res) => {
        console.log(res, "充电宝");
        data.ProtectiveListsss = res.Product;
      });
    };
    getPromo();
    getAppliances();
    getAppliancess();
    getProtective();
    getProtectives();
    getProtectivess();
    getProtectivesss();
    return {
      ...toRefs(data),
      tabsBtn,
    };
  },
};
</script>

<style lang="scss" scoped>
.active {
  background-color: #ccc;
}
.goods_box {
  margin-left: 50px;
}
.fo {
  font-size: 25px;
}

.goods_tab {
  width: 60%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dsf1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
